<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>商品汇</title>
    <!-- 引入页签样式 -->
    <link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon">
    <!-- 引入重置样式 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./css/index.css">
    <style>

    </style>
</head>

<body>
    <!--  顶部导航栏 -->
    <div class="topbar">
        <!-- 版心 -->
        <div class="container clearfix">
            <!-- 左侧的欢迎区域 -->
            <div class="welcome leftfix">
                <span class="hello">商品汇欢迎您</span>
                <span>请</span>
                <a href="#" class="login">登录</a>
                <a href="#" class="register">免费注册</a>
            </div>
            <!-- 右侧的导航区域 -->
            <div class="topbar-nav rightfix">
                <ul class="item clearfix">
                    <li><a href="#">我的订单</a></li>
                    <li><a href="#">我的购物车</a></li>
                    <li><a href="#">我的尚品汇</a></li>
                    <li><a href="#">尚品汇会员</a></li>
                    <li><a href="#">企业采购</a></li>
                    <li><a href="#">关注尚品汇</a></li>
                    <li><a href="#">合作招商</a></li>
                    <li><a href="#">商品后台</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 头部 -->
    <div class="head">
        <div class="container clearfix">
            <div class="logo leftfix">
                <img src="./images/logo.png" alt="商品汇">
            </div>
            <div class="search rightfix">
                <form>
                    <input type="text">
                    <button></button>
                </form>
            </div>
        </div>
    </div>
    <!-- 主导航区 -->
    <div class="main-nav">
        <div class="container clearfix">
            <div class="all-types leftfix">全部商品分类</div>
            <div class="main-nav-list leftfix clearfix">
                <ul><a href="#">商品超市</a></ul>
                <ul><a href="#">优惠券</a></ul>
                <ul><a href="#">买啥</a></ul>
                <ul><a href="#">商品家电</a></ul>
                <ul><a href="#">商品生鲜</a></ul>
                <ul><a href="#">PLUSE会员</a></ul>
                <ul><a href="#">进口好物</a></ul>
                <ul><a href="#">品牌闪购</a></ul>
                <ul><a href="#">拍卖</a></ul>
                <ul><a href="#">五金商店</a></ul>
            </div>
        </div>
    </div>
    <!-- 内容区 -->
    <div class="main-content">
        <div class="container clearfix">
            <ul class="side-nav leftfix">
                <li>
                    <a href="#">手机/运营商/数码</a>
                    <div class="second-menu clearfix">
                        <dl>
                            <dt>电子书刊</dt>
                            <dd><a href="#">电子书</a></dd>
                            <dd><a href="#">网络原创</a></dd>
                            <dd><a href="#">数字杂志</a></dd>
                            <dd><a href="#">多媒体图书</a></dd>
                        </dl>
                        <dl>
                            <dt>音像</dt>
                            <dd><a href="#">音乐</a></dd>
                            <dd><a href="#">影视</a></dd>
                            <dd><a href="#">教育音像</a></dd>
                        </dl>
                        <dl>
                            <dt>电子书刊</dt>
                            <dd><a href="#">英文原版</a></dd>
                            <dd><a href="#">少儿</a></dd>
                            <dd><a href="#">商务投资</a></dd>
                            <dd><a href="#">多媒体图书</a></dd>
                        </dl>
                        <dl>
                            <dt>电子书刊</dt>
                            <dd><a href="#">电子书</a></dd>
                            <dd><a href="#">网络原创</a></dd>
                            <dd><a href="#">数字杂志</a></dd>
                            <dd><a href="#">多媒体图书</a></dd>
                        </dl>
                        <dl>
                            <dt>电子书刊</dt>
                            <dd><a href="#">电子书</a></dd>
                            <dd><a href="#">网络原创</a></dd>
                            <dd><a href="#">数字杂志</a></dd>
                            <dd><a href="#">多媒体图书</a></dd>
                        </dl>
                        <dl>
                            <dt>电子书刊</dt>
                            <dd><a href="#">电子书</a></dd>
                            <dd><a href="#">网络原创</a></dd>
                            <dd><a href="#">数字杂志</a></dd>
                            <dd><a href="#">多媒体图书</a></dd>
                        </dl>
                        <dl>
                            <dt>电子书刊</dt>
                            <dd><a href="#">电子书</a></dd>
                            <dd><a href="#">网络原创</a></dd>
                            <dd><a href="#">数字杂志</a></dd>
                            <dd><a href="#">多媒体图书</a></dd>
                        </dl>
                        <dl>
                            <dt>电子书刊</dt>
                            <dd><a href="#">电子书</a></dd>
                            <dd><a href="#">网络原创</a></dd>
                            <dd><a href="#">数字杂志</a></dd>
                            <dd><a href="#">多媒体图书</a></dd>
                        </dl>
                        <dl>
                            <dt>电子书刊</dt>
                            <dd><a href="#">电子书</a></dd>
                            <dd><a href="#">网络原创</a></dd>
                            <dd><a href="#">数字杂志</a></dd>
                            <dd><a href="#">多媒体图书</a></dd>
                        </dl>
                        <dl>
                            <dt>电子书刊</dt>
                            <dd><a href="#">电子书</a></dd>
                            <dd><a href="#">网络原创</a></dd>
                            <dd><a href="#">数字杂志</a></dd>
                            <dd><a href="#">多媒体图书</a></dd>
                        </dl>
                        <dl>
                            <dt>电子书刊</dt>
                            <dd><a href="#">电子书</a></dd>
                            <dd><a href="#">网络原创</a></dd>
                            <dd><a href="#">数字杂志</a></dd>
                            <dd><a href="#">多媒体图书</a></dd>
                        </dl>
                        <dl>
                            <dt>电子书刊</dt>
                            <dd><a href="#">电子书</a></dd>
                            <dd><a href="#">网络原创</a></dd>
                            <dd><a href="#">数字杂志</a></dd>
                            <dd><a href="#">多媒体图书</a></dd>
                        </dl>

                    </div>
                </li>
                <li><a href="#">电脑/办公</a></li>
                <li><a href="#">家具/家居/家装/厨具</a></li>
                <li><a href="#">男装/女装/童装/内衣</a></li>
                <li><a href="#">美妆/个护清洁/宠物</a></li>
                <li><a href="#">女鞋/箱包/钟表/珠宝</a></li>
                <li><a href="#">男鞋/运动/户外</a></li>
                <li><a href="#">房产/汽车/汽车用品</a></li>
                <li><a href="#">母婴/玩具乐器</a></li>
                <li><a href="#">食品/酒类/生鲜/特产</a></li>
                <li><a href="#">艺术/礼部鲜花/农资绿植</a></li>
                <li><a href="#">医保保健/计生情趣</a></li>
                <li><a href="#">图书/文娱/教育/电子书</a></li>
                <li><a href="#">机票/酒店/旅游/生活</a></li>
                <li><a href="#">众筹/白条/保险/企业金融</a></li>
                <li><a href="#">安装/维修/清洗/二手</a></li>
            </ul>
            <div class="banner leftfix">
                <img src="./images/banner主图.png" alt="主图">
            </div>
            <!-- 右侧快品上报 -->
            <div class="side-other leftfix">
                <div class="message">
                    <div class="title clearfix">
                        <span class="leftfix">商品快报</span>
                        <a class="rightfix" href="#">&nbsp;更多&gt;</a>
                    </div>
                    <ul class="msg-list">
                        <li><a href="#">[特惠]毛衣加直筒裤，才是YYDS！</a></li>
                        <li><a href="#">[特惠]毛衣加直筒裤，才是YYDS！</a></li>
                        <li><a href="#">[特惠]毛衣加直筒裤，才是YYDS！</a></li>
                        <li><a href="#">[特惠]毛衣加直筒裤，才是YYDS！</a></li>

                    </ul>
                </div>
                <div class="other-nav">
                    <ul class="other-nav-list clearfix">
                        <li>
                            <div class="picture"></div>
                            <span>话费</span>
                        </li>
                        <li>
                            <div class="picture-two"></div>
                            <span>话费</span>
                        </li>
                        <li>
                            <div class="picture-three"></div>
                            <span>话费</span>
                        </li>
                        <li>
                            <div class="picture-four"></div>
                            <span>话费</span>
                        </li>
                    </ul>
                    <ul class="other-nav-list clearfix">
                        <li>
                            <div class="picture"></div>
                            <span>话费</span>
                        </li>
                        <li>
                            <div class="picture-two"></div>
                            <span>话费</span>
                        </li>
                        <li>
                            <div class="picture-three"></div>
                            <span>话费</span>
                        </li>
                        <li>
                            <div class="picture-four"></div>
                            <span>话费</span>
                        </li>
                    </ul>
                    <ul class="other-nav-list clearfix">
                        <li>
                            <div class="picture"></div>
                            <span>话费</span>
                        </li>
                        <li>
                            <div class="picture-two"></div>
                            <span>话费</span>
                        </li>
                        <li>
                            <div class="picture-three"></div>
                            <span>话费</span>
                        </li>
                        <li>
                            <div class="picture-four"></div>
                            <span>话费</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 秒杀 -->
    <div class="seckill">
        <div class="container">
            <div class="clearfix">
                <img src="./images/seckill.png" alt="秒杀">
                <img src="./images/banner1.png" alt="秒杀">
                <img src="./images/banner2.png" alt="秒杀">
                <img src="./images/banner3.png" alt="秒杀">
                <img src="./images/baner4.png" alt="秒杀">
            </div>
        </div>
    </div>
    <!-- 楼层 -->
    <div class="floor">
        <div class="container">
            <!-- 上部分 -->
            <div class="floor-upper clearfix">
                <div class="item leftfix">家用电器</div>
                <ul class="floor-upper-item rightfix clearfix">
                    <li><a href="#">热门</a></li>
                    <li><a href="#">大家电</a></li>
                    <li><a href="#">生活电器</a></li>
                    <li><a href="#">厨房电器</a></li>
                    <li><a href="#">应季电器</a></li>
                    <li><a href="#">空气/电器</a></li>
                    <li><a href="#">高端电器</a></li>
                </ul>
            </div>
            <!-- 下部分 -->
            <div class="floor-bottom">
                <div class="item1">
                    <ul class="item1-list clearfix">
                        <li><a href="#">节能补贴</a></li>
                        <li><a href="#">4K电视</a></li>
                        <li><a href="#">空气净化器</a></li>
                        <li><a href="#">IH电饭煲</a></li>
                        <li><a href="#">滚筒洗衣机</a></li>
                        <li><a href="#">电热水器</a></li>
                    </ul>
                    <div class="item1-picture">
                        <img src="./images/编组.png" alt="电视">
                    </div>
                </div>
                <div class="item2">
                    <img src="./images/appliance_banner07.png" alt="电饭锅">
                </div>
                <div class="item3">
                    <img src="./images/微波炉.png" alt="微波炉">
                    <img src="./images/空气炸锅.png" alt="空气炸锅">
                </div>
                <div class="item4">
                    <img src="./images/冰箱.png" alt="冰箱">
                </div>
                <div class="item5">
                    <img src="./images/电饭煲.png" alt="电饭煲">
                    <img src="./images/电饭煲2.png" alt="电饭煲">
                </div>
            </div>
        </div>
    </div>
    <!-- 楼层 -->
    <div class="floor">
        <div class="container">
            <!-- 上部分 -->
            <div class="floor-upper clearfix">
                <div class="item leftfix">家用电器</div>
                <ul class="floor-upper-item rightfix clearfix">
                    <li><a href="#">热门</a></li>
                    <li><a href="#">大家电</a></li>
                    <li><a href="#">生活电器</a></li>
                    <li><a href="#">厨房电器</a></li>
                    <li><a href="#">应季电器</a></li>
                    <li><a href="#">空气/电器</a></li>
                    <li><a href="#">高端电器</a></li>
                </ul>
            </div>
            <!-- 下部分 -->
            <div class="floor-bottom">
                <div class="item1">
                    <ul class="item1-list clearfix">
                        <li><a href="#">节能补贴</a></li>
                        <li><a href="#">4K电视</a></li>
                        <li><a href="#">空气净化器</a></li>
                        <li><a href="#">IH电饭煲</a></li>
                        <li><a href="#">滚筒洗衣机</a></li>
                        <li><a href="#">电热水器</a></li>
                    </ul>
                    <div class="item1-picture">
                        <img src="./images/编组.png" alt="电视">
                    </div>
                </div>
                <div class="item2">
                    <img src="./images/appliance_banner07.png" alt="电饭锅">
                </div>
                <div class="item3">
                    <img src="./images/微波炉.png" alt="微波炉">
                    <img src="./images/空气炸锅.png" alt="空气炸锅">
                </div>
                <div class="item4">
                    <img src="./images/冰箱.png" alt="冰箱">
                </div>
                <div class="item5">
                    <img src="./images/电饭煲.png" alt="电饭煲">
                    <img src="./images/电饭煲2.png" alt="电饭煲">
                </div>
            </div>
        </div>
    </div>
    <!-- 页脚 -->
    <div class="footer">
        <div class="container">
            <div class="footer-list clearfix">
                <ul class="footer-list-item">
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">购物指南</a></li>
                </ul>
                <ul class="footer-list-item">
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">购物指南</a></li>
                </ul>
                <ul class="footer-list-item">
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">购物指南</a></li>
                </ul>
                <ul class="footer-list-item">
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">购物指南</a></li>
                </ul>
                <ul class="footer-list-item">
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">购物指南</a></li>
                </ul>
                <ul class="footer-list-item">
                    <li><a href="#">自营覆盖区县</a></li>
                    <li><a href="#">购物指南购物指南购物指南</a></li>
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">购物指南</a></li>
                </ul>
            </div>
            <div class="last" >&copy;京IPC备12345678901</div>

        </div>
    </div>
</body>

</html>